<template>
	<view class="operate">
		<view class="seat"></view>
		<view class="content">
			<view class="title">
				<text>浙江省数据看板</text>
				<text>|</text>
				<text>2025-04-28 12:28:32</text>
			</view>
			<view class="flow-water-price standard-box">
				<view class="top">
					<view class="title">
						浙江省商户月流水金额
					</view>
					<view class="tag-drop-down">
						<text>杭州市</text>
						<text class="icon cuIcon-triangledownfill"></text>
					</view>
				</view>

				<view class="rank-content">

					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</view>

			<view class="turnover-rank standard-box">
				<view class="top">
					<view class="title">
						浙江省商家营业额排行榜
					</view>
					<view class="tag-drop-down">
						<text>杭州市</text>
						<text class="icon cuIcon-triangledownfill"></text>
					</view>
				</view>
				<view class="rank-content">
					<swiper class="swiper" circular indicator-dots autoplay :interval="3000"
						:duration="500">
						<swiper-item v-for="(item1,i1) in 3" :key="i1">
							<view class="rank-item" v-for="(item,i) in 5" :key="i">
								<view class="left">
									<view class="head-logo">
										<image
											src="https://tse1-mm.cn.bing.net/th/id/OIP-C.eDM07Cc_OMJA5Q0KjTV1kQHaIe?w=153&h=180&c=7&r=0&o=5&cb=iwc1&pid=1.7"
											mode="widthFix"></image>
										<view class="num" :class="i==0?'first':i==1?'second':i==2?'third':''">
											{{i+1}}
										</view>
									</view>
									<text>这里是商户名称</text>
								</view>
								<view class="right">
									<view>
										21990w
									</view>
									<view>
										商家营业额
									</view>
								</view>
							</view>							
						</swiper-item>
					</swiper>
					


				</view>

			</view>

			<button :loading="loading" class="cu-btn block bg-blue lg margin-top-lg margin-bottom-lg" @click="logOut">
			    退出登录
			</button>
		</view>

	</view>
</template>

<script>
	import { getToken } from '@/utils/auth'
	export default {
		data() {
			return {
				loading:false,
				opts: {
					legend: {
						show: false
					},
					color: ["#FFC43F", "#FAC858"],
					padding: [15, 10, 10, 10],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					xAxis: {
						disableGrid: true
					},
					// yAxis: {
					// 	gridType: "dash",
					// 	dashLength: 2,
					// 	data: [{
					// 		min: 0,
					// 		max: 150
					// 	}]
					// },
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				},
				chartData: {},
			
			}
		},
		onReady() {
			this.getBrokenLineData();
		},
		onLoad() {
			//页面进入加载前先判断下
			if(!getToken()){
				uni.reLaunch({
					url:"/pages/start"
				})	
				
			}else{
				
			}
		},
		methods: {
			//获取折线数据
			getBrokenLineData() {
				let res = {
					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
					series: [{
							name: "成交量A",
							linearColor: [
								[
									0,
									"#FFC43F"
								],
								[
									1,
									"#ffeea6"
								]
							],
							setShadow: [
								3,
								8,
								10,
								"#ffeea6"
							],
							data: [15, 45, 15, 45, 1800, 12]
						},
						
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			//退出登录
			logOut(){
				this.loading=true
				this.$store.dispatch('LogOut').then(() => {
				  this.loading=false
				  uni.reLaunch({
				  	url:"/pages/work/merchant"
				  })
				  
				}).catch(() => {
					this.loading=false
				
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.operate {

		.seat {
			background-color: #3176FC;
			height: 44rpx;
		}

		.content {
			background-color: #EBF5FF;
			padding: 22rpx 24rpx;
			border-radius: 24rpx 24rpx 0px 0px;
			border: 2rpx solid #fff;
			// border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
			transform: translateY(-20rpx);

			.title {
				margin: 12rpx 0;

				text {
					font-size: 32rpx;
					font-weight: 600;
				}

				text+text {
					font-size: 28rpx;
					margin-left: 16rpx;
				}
			}

		}

		.flow-water-price {
			height: 600rpx;
		}

		.turnover-rank {
			height: 980rpx;

			.rank-content {
				padding-top: 4rpx;
				.swiper{
					height:854rpx ;
				}
				.rank-item {
					margin-top: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;
						color: #3D3D3D;
						position: relative;

						.num.first {
							background: rgba(255, 196, 71, 1);
						}

						.num.second {
							background: rgba(186, 197, 255, 1);
						}

						.num.third {
							background: rgba(223, 159, 132, 1);
						}

						.num {
							position: absolute;
							left: 48px;
							top: 0;
							background: rgba(211, 211, 211, 1);
							color: #fff;
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							text-align: center;
							line-height: 24rpx;
							font-size: 22rpx;
							padding: 4rpx 0;
						}

						.head-logo {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 24rpx;

							image {
								width: 120rpx;
							}
						}
					}

					.right {
						view {
							font-size: 32rpx;
							color: #3D3D3D;
						}

						view+view {
							margin-top: 8rpx;
							color: #BEBEBE;
							font-size: 22rpx;
						}
					}
				}

			}
		}


	}
</style>